import 'package:bigegg/dialog/xmm_business_dialog.dart';
import 'package:bigegg/entity/user/xmm_wall_user.dart';
import 'package:bigegg/entity/xmm_video_info.dart';
import 'package:bigegg/global/routes/xmm_routes.dart';
import 'package:bigegg/global/user/xmm_account_manager.dart';
import 'package:bigegg/page/main/page/video/xmm_video_controller.dart';
import 'package:bigegg/utils/dialog/xmm_dialog_utils.dart';
import 'package:bigegg/widget/image/xmm_circle_cached_network_image.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';

class XmmVideoPage extends StatefulWidget {
  const XmmVideoPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return XmmVideoPageState();
  }
}

class XmmVideoPageState extends State<XmmVideoPage>
    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
  final controller = Get.find<XmmVideoController>();

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    controller.getVideoList();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(top: context.mediaQueryPadding.top),
        color: const Color(0xFF15E8C2),
        child: Stack(
          children: [
            Container(
              padding: EdgeInsets.only(left: 16.w),
              child: Image.asset(
                "assets/images/xmm_icon_video_top_img.png",
                height: 121.w,
                fit: BoxFit.fitWidth,
              ),
            ),
            Column(
              children: [
                SizedBox(height: 96.w),
                getTopListWidget(),
                SizedBox(height: 23.w),
                getContentListWidget(),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget getTopListWidget() {
    return SizedBox(
      height: 45.w,
      child: Obx(
        () => ListView.separated(
          padding: EdgeInsets.only(left: 20.w),
          separatorBuilder: (_, __) => SizedBox(width: 18.w),
          itemCount: controller.topUserList.length,
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) {
            var item = controller.topUserList.elementAt(index);
            return GestureDetector(
              onTap: () => XmmRoutes.routePersonPage(item.userId ?? ""),
              child: Container(
                width: 45.w,
                height: 45.w,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.white,
                    width: 1,
                  ),
                ),
                child: XmmCircleCachedNetworkImage(imageUrl: item.getAvatarUrl ?? ""),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget getContentListWidget() {
    return Expanded(
      child: Obx(
        () => StaggeredGridView.countBuilder(
          padding: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 100.w),
          crossAxisCount: 2,
          crossAxisSpacing: 11.w,
          mainAxisSpacing: 10.w,
          itemCount: controller.hotVideoList.length,
          staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
          itemBuilder: (context, index) {
            var item = controller.hotVideoList.elementAt(index);
            var user = XmmAccountManager.instance.findWallUser(item.userId ?? "");
            return GestureDetector(
              onTap: () => XmmBusinessDialog.showVideoDialog(item),
              child: getItemWidget(item, user, index == 0 ? 206.w : 280.w),
            );
          },
        ),
      ),
    );
  }

  Widget getItemWidget(XmmVideoInfo item, XmmWallUser user, double height) {
    return Container(
      height: height,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        image: DecorationImage(
          image: CachedNetworkImageProvider(item.middleThumbUrl ?? ""),
          fit: BoxFit.cover,
        ),
      ),
      child: Stack(
        children: [
          Container(
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(8),
                bottomRight: Radius.circular(8),
              ),
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Colors.transparent,
                  Colors.transparent,
                  Color(0x99000000),
                ],
              ),
            ),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                margin: EdgeInsets.only(left: 4.w),
                child: Text(
                  item.title ?? "",
                  style: TextStyle(fontSize: 12.sp, color: Colors.white),
                ),
              ),
              SizedBox(height: 5.w),
              Row(
                children: [
                  GestureDetector(
                    onTap: () => XmmRoutes.routePersonPage(item.userId ?? ""),
                    child: Container(
                      margin: EdgeInsets.only(left: 3.w, bottom: 3.w),
                      child: CachedNetworkImage(
                        width: 25.w,
                        height: 25.w,
                        imageUrl: user.getAvatarUrl ?? "",
                        imageBuilder: (context, imageProvider) => Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4),
                            image: DecorationImage(
                                image: imageProvider, fit: BoxFit.cover),
                            border: Border.all(color: Colors.white, width: 1),
                          ),
                        ),
                        placeholder: (context, url) =>
                            const CircularProgressIndicator(),
                      ),
                    ),
                  ),
                  SizedBox(width: 4.w),
                  Expanded(
                    child: Text(
                      user.nickname ?? "",
                      style: TextStyle(
                        fontSize: 10.sp,
                        color: const Color(0x99FFFFFF),
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  const Expanded(child: SizedBox()),
                  Container(
                    margin: EdgeInsets.only(right: 4.w, bottom: 4.w),
                    child: Image.asset(
                      "assets/images/xmm_icon_video_play.png",
                      width: 24.w,
                      height: 24.w,
                    ),
                  )
                ],
              )
            ],
          ),
          Positioned(
            right: 8.w,
            top: 8.w,
            child: GestureDetector(
              onTap: () => XmmBusinessDialog.showMoreDialog(user.userId ?? ""),
              child: Image.asset(
                "assets/images/xmm_icon_video_more.png",
                width: 28.w,
                height: 28.w,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
